import { FC, useState, useEffect } from 'react';
import { useModel } from 'umi';
import Image from '@/components/Image';
import TotalNum from './../TotalNum';
import Pie from '@/components/Pie';
import SimpleList from '@/components/SimpleList';
import Dialog from './../Dialog';
import Detail from '../Detail';

import circle from '@/assets/cyl/circle.png';
import whitePoint from '@/assets/cyl/white_point.png';

import styles from './style.less';

const reportColumns: {
  title: string;
  dataIndex: string;
  width: number;
  align: 'left' | 'center';
  render?: Function;
}[] = [
  {
    title: '标题',
    dataIndex: 'title',
    width: 518,
    align: 'left',
    render: (item: any) => (
      <p
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          boxSizing: 'border-box',
          paddingLeft: 5,
          marginBottom: 0,
        }}
      >
        <Image src={whitePoint}></Image>
        <span
          style={{
            paddingLeft: 5,
          }}
        >
          {item.title}
        </span>
      </p>
    ),
  },
  {
    title: '时间',
    dataIndex: 'date',
    width: 215,
    align: 'center',
  },
];

import { pageIprops, chainList, contentKey } from '@/interface/cyl';
import pageConfig from '../config';
import theme from 'echarts/types/src/theme/dark';
const buildPieColor = (list: chainList[]) =>
  list.map((item: chainList) => item.color);
interface Iprops {
  type: contentKey;
}
const Content: FC<Iprops> = (props) => {
  const { type } = props;
  const {
    dataBoard,
    getDataBoard,
    dataBoardPie,
    getDataBoardPie,
    reportList,
    getReportList,
    entList,
    getEntList,
  } = useModel('home');

  const [showDetail, setShowDetail] = useState<string>('');
  const [detailKey, setDetailKey] = useState<string>('');
  const [picture, setPicture] = useState<string>('');
  const [pieColors, setPieColors] = useState<string[]>([]);
  const [iconList, setIconList] = useState<chainList[]>([]);
  const [title, setTitle] = useState<string>('');

  const [dialogTitle, setDialogTitle] = useState<string>('');
  const [previewUrl, setPreviewUrl] = useState<string>('');
  const [downloadUrl, setDownloadUrl] = useState<string>('');
  const [showDialog, setShowDialog] = useState<boolean>(false);

  useEffect(() => {
    const pageInfo: pageIprops = pageConfig[type];
    const { title, reportKey, picture, diagram } = pageInfo;
    setPieColors(buildPieColor(diagram));
    setIconList(diagram);
    setPicture(picture);
    setTitle(title);
    getDataBoard({ type: title });
    getDataBoardPie({ industrial_chain_id: title });
    getEntList({ industrial_chain_parent: title });
    getReportList({ theme: reportKey });
  }, [type]);

  return !showDetail ? (
    <div className={styles.container}>
      <div className={styles.middle_content}>
        <div className={styles.title_warp}>{title}链图</div>
        <div className={styles.chain_view}>
          <div>
            <Image src={circle}></Image>
            <Image src={picture} className={styles.main_pic}></Image>
            {iconList.map((item: chainList, index: Number) => (
              <div
                className={styles.icon}
                style={{
                  top: item.y,
                  left: item.x,
                  color: item.color,
                }}
                key={item.title}
                onClick={() => {
                  setShowDetail(item.title);
                  setDetailKey(item.key);
                }}
              >
                <span>{item.title}</span>
                <span>产业链</span>
                <Image src={item.icon}></Image>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className={styles.right_content}>
        <div className={styles.data_board}>
          <div className={styles.title_warp}>数据看板</div>
          <div className={styles.main_body}>
            <div>
              <TotalNum data={dataBoard}></TotalNum>
            </div>
            <div>
              <Pie
                title={'工业总值产业链分布'}
                colors={pieColors}
                dataSource={dataBoardPie || []}
              />
            </div>
          </div>
        </div>
        <div className={styles.company_board}>
          <div className={styles.title_warp}>企业名单</div>
          <SimpleList
            columns={[
              {
                dataIndex: 'B102',
                title: '公司名称',
                width: 220,
              },
              {
                dataIndex: 'C01_2',
                title: '工业化产值',
                width: 100,
              },
              {
                dataIndex: 'C301_1',
                title: '营业收入',
                width: 100,
              },
              {
                dataIndex: 'Z48',
                title: '能源能耗',
                width: 100,
              },
            ]}
            dataSource={entList}
            width={740}
            height={300}
          />
        </div>
        <div className={styles.report_board}>
          <div className={styles.title_warp}>分析报告</div>
          <div className={styles.board_content}>
            <SimpleList
              height={185}
              width={732}
              hideHead
              hover
              columns={reportColumns}
              selected={(v: any) => {
                setDialogTitle(v.title);
                setPreviewUrl(v.previewUrl);
                setDownloadUrl(v.downloadUrl);
                setShowDialog(true);
              }}
              dataSource={reportList}
            />
          </div>
        </div>
      </div>
      <Dialog
        title={dialogTitle}
        visible={showDialog}
        previewUrl={previewUrl}
        downloadUrl={downloadUrl}
        onClose={() => {
          setDialogTitle('');
          setDownloadUrl('');
          setPreviewUrl('');
          setShowDialog(false);
        }}
      />
    </div>
  ) : (
    <div>
      <Detail type={showDetail} parent={title} detailKey={detailKey}></Detail>
    </div>
  );
};

export default Content;
